<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                title="城市选择"
                left-arrow
                @click-left="$router.back()"
            >
            </van-nav-bar>
        </header>

        <div class="content">
            <van-index-bar>
                <template>
                    <div  v-for="item of cityList" :key="item.letter">
                        <van-index-anchor   :index="item.letter | caseFilter"  />
                        <van-cell @click="selectCity(item.name)" v-for="item of item.data" :title="item.name" :key="item.cityId" />
                    </div>
                </template>
           
              

            </van-index-bar>
        </div>
    </div>
</template>

<script>


import Vue from "vue"
import { getSortCity  } from "../../api/city"
import {NavBar   , IndexBar, IndexAnchor , Cell} from "vant"
Vue.use(NavBar)
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell)
export default {
    data(){
        return {
            cityList:[]
        }
    },
    mounted(){
        // console.log(111);
        getSortCity().then(res => {
            console.log(JSON.parse(res.data.data));
            this.cityList = JSON.parse(res.data.data)
        })
    },
    filters:{
        caseFilter: (value) => {
            return value.toUpperCase()
        }
    },
    methods:{
        selectCity(name){
            localStorage.setItem('name', name)
            
            this.$router.push('/home')

        }
    }
}
</script>

<style>

</style>